<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" :inline="true" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              clearable
              placeholder="请输入管家名称"
              v-model="searchForm.housekeeperName"
              @clear="clearSearch"
              style="margin-right: 10px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <perButton label="新建管家" type="primary" icon="el-icon-plus" perms="PROTOCOL_ADD"
                   @click="newCompanyClick"></perButton>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
        >
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="housekeeperCode" label="管家编码" align="center"/>
          <el-table-column prop="housekeeperName" label="管家名称" align="center"/>
          <el-table-column prop="housekeeperPhone" label="管家手机号" align="center"/>
<!--          <el-table-column prop="housekeeperPwd" label="密码" align="center"/>-->
          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              {{ scope.row.housekeeperSex == "0" ? "女" : "男"}}
            </template>
          </el-table-column>
          <el-table-column prop="housekeeperHeight" label="身高" align="center"/>
          <el-table-column prop="housekeeperWeight" label="体重" align="center"/>
          <el-table-column prop="housekeeperDesc" label="管家描述" align="center"/>
          <el-table-column prop="bannerUrl" label="管家照片" align="center">
            <template #default="{ row }">
              <viewer class="w-100 h-100">
                <img
                  style="display: inline-block;height: 75px;width: 75px;"
                  :src="row.housekeeperUrl"
                  class="mt-1 mr-1 ml-1 mb-1 bg-light h-100 w-100 obj-contain">
              </viewer>
            </template>
          </el-table-column>
          <el-table-column prop="createByName" label="创建人" align="center"/>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="400" align="center">
            <template #default="{ row }">
              <perButton label="收益记录" type="primary" size="mini" perms="PROTOCOL_ADD"
                         @click="maintenanceRecordClick(row)"></perButton>
              <perButton label="服务客户" type="primary" size="mini" perms="PROTOCOL_ADD"
                         @click="configClick(row)"></perButton>
              <perButton label="编辑" type="warning" size="mini" perms="PROTOCOL_EDIT"
                         @click="handlerEdit(row)"></perButton>
              <perButton label="删除" type="danger" size="mini" perms="PROTOCOL_DEL"
                         @click="handlerDelete(row)"></perButton>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <!-- 新增编辑 -->
    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newModel"
            :rules="rules"
            ref="modelRef"
            label-width="100px"
          >
            <el-form-item label="管家名称" prop="housekeeperName">
              <el-input v-model="newModel.housekeeperName"/>
            </el-form-item>
            <el-form-item label="管家性别" prop="housekeeperSex">
              <el-select v-model="newModel.housekeeperSex">
                <el-option
                  v-for="item in housekeeperSexData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="管家密码" prop="housekeeperPwd">
              <el-input v-model="newModel.housekeeperPwd" show-password/>
            </el-form-item>
            <el-form-item label="管家手机号" prop="housekeeperPhone">
              <el-input v-model="newModel.housekeeperPhone"/>
            </el-form-item>
            <el-form-item label="管家身高" prop="housekeeperHeight">
              <el-input v-model="newModel.housekeeperHeight" type="number"/>
            </el-form-item>
            <el-form-item label="管家体重" prop="housekeeperWeight">
              <el-input v-model="newModel.housekeeperWeight" type="number"/>
            </el-form-item>
            <el-form-item label="管家描述" prop="housekeeperDesc">
              <el-input v-model="newModel.housekeeperDesc"/>
            </el-form-item>
            <el-form-item label="管家照片" prop="housekeeperUrl">
              <el-upload
                :action="$uploadUrl + upload"
                class="avatar-uploader"
                v-model="newModel.housekeeperUrl"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="newModel.housekeeperUrl"
                  :src="newModel.housekeeperUrl"
                  class="avatar"
                />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  :class="{ drop: detailsDisabled }"
                ></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <!-- 收益记录 -->
    <yc-dialog
      ref="maintenanceRecordDialog"
      :dialogTitle="dialogTitle"
      :show-center="false"
    >
      <template #content>
        <div class="dialog-content">
          <el-table
            :data="maintenanceRecordData"
            border
            style="width: 100%;"
          >
            <el-table-column type="index" label="序号" width="80" align="center"/>
            <el-table-column prop="orderCode" label="订单编号" align="center"/>
            <el-table-column prop="orderAmount" label="订单金额" align="center"/>
            <el-table-column prop="commissionAmount" label="收益金额" align="center"/>
            <el-table-column prop="commissionRate" label="收益比例" align="center"/>
            <el-table-column prop="createTime" label="收益时间" align="center"/>
            <el-table-column prop="legalRepresentative" label="操作" align="center">
              <template #default="{ row }">
                <perButton label="查看明细" type="primary" size="mini" perms="PROTOCOL_ADD"
                           @click="mxClick(row)"></perButton>
              </template>
            </el-table-column>
          </el-table>
          <div class="d-flex justify-content-end">
            <pagination
              class="pagination"
              :total="count2"
              :page.sync="pageIndex2"
              :limit.sync="pageSize2"
              @pagination="pagination2"
            />
          </div>
        </div>
      </template>
      <template #footer>
        <el-button @click="$refs.maintenanceRecordDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 查看明细 -->
    <yc-dialog
      ref="mxdDialog"
      dialogWidth="60%"
      :dialogTitle="dialogTitle"
      :show-center="false"
    >
      <template #content>
        <div class="dialog-content">
          <div class="d-flex align-center mb-3">
            <div class="my_line"></div>
            <div class="my_title">订单基本信息</div>
          </div>
          <el-row class="mb-2" :gutter="20">
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">订单编号：</div>
                <div class="orderValue">{{mxObject.orderCode}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">订单总价：</div>
                <div class="orderValue">{{mxObject.orderAmount}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">客户名称：</div>
                <div class="orderValue">{{mxObject.customerName}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="mb-4" :gutter="20">
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">客户编码：</div>
                <div class="orderValue">{{mxObject.customerCode}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">{{itemTableData.payStatus==0?"订单优惠": "优惠金额"}}：</div>
                <div class="orderValue">{{mxObject.orderDiscount}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">创建时间：</div>
                <div class="orderValue">{{mxObject.createTime}}</div>
              </div>
            </el-col>
          </el-row>

          <template v-if="mxObject.addressCode">
            <div class="d-flex align-center mb-3">
              <div class="my_line"></div>
              <div class="my_title">地址基本信息</div>
            </div>
            <el-row class="mb-2" :gutter="20">
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">姓名：</div>
                  <div class="orderValue">{{mxObject.receiverName}}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">省市区：</div>
                  <div class="orderValue">{{mxObject.receiverArea}}</div>
                </div>
              </el-col>
            </el-row>
            <el-row class="mb-4" :gutter="20">
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">手机号：</div>
                  <div class="orderValue">{{mxObject.receiverPhone}}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">详细地址：</div>
                  <div class="orderValue">{{mxObject.detailAdress}}</div>
                </div>
              </el-col>
            </el-row>
          </template>

          <div class="d-flex align-center mb-3">
            <div class="my_line"></div>
            <div class="my_title">订单明细列表</div>
          </div>
          <el-table
            :data="mxData"
            border
            style="width: 100%;"
          >
            <el-table-column type="index" label="序号" width="80" align="center"/>
            <el-table-column prop="productCode" label="商品编码" align="center"/>
            <el-table-column prop="productName" label="商品名称" align="center"/>
            <el-table-column prop="itemAmout" label="商品单价" align="center"/>
            <el-table-column prop="stock" label="商品数量" align="center"/>
          </el-table>
          <div class="d-flex mt-3">
            <div class="orderTitle2">本次实付金额：</div>
            <div class="orderValue2">{{mxObject.actuallyAmount}}</div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button @click="$refs.mxdDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 服务客户 -->
    <yc-dialog
      ref="configDialog"
      :show-center="false"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-table
            :data="clientData"
            border
            style="width: 100%;"
          >
            <el-table-column type="index" label="序号" width="80" align="center"/>
            <el-table-column prop="customerCode" label="客户编号" align="center"/>
            <el-table-column prop="customerName" label="客户名称" align="center"/>
            <el-table-column prop="customerPhone" label="客户手机号" align="center"/>
            <el-table-column prop="customerBirthday" label="客户生日" align="center"/>
            <el-table-column prop="memberLevelRuleName" label="会员等级" align="center"/>
            <el-table-column prop="remainingAmount" label="账户余额" align="center"/>
          </el-table>
          <div class="d-flex justify-content-end">
            <pagination
              class="pagination"
              :total="count3"
              :page.sync="pageIndex3"
              :limit.sync="pageSize3"
              @pagination="pagination3"
            />
          </div>
        </div>
      </template>
      <template #footer>
        <el-button @click="$refs.configDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"
  import {
    queryPageMajordomo,
    insertMajordomo,
    updateMajordomo,
    deleteMajordomo,
    queryPageCustomer,
    queryPageHousekeeper,
    queryOrderOne,
    queryOrderList
  } from "@/api/majordomoManagement/majordomoInfo"
  import { getToken } from "@/utils/auth"

  export default {
    components: {
      ycDialog,
      perButton
    },
    data() {
      return {
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        searchForm: {
          housekeeperName: ""
        },
        itemTableData: {},
        detailsDisabled: false,
        isGlobalMessageShow: false,

        dialogCenterTitle: "",
        dialogTitle: "",
        message: "",

        loading: false,
        newModel: {
          id: "",
          housekeeperCode: "",
          housekeeperName: "",
          housekeeperSex: "",
          housekeeperPwd: "",
          housekeeperPhone: "",
          housekeeperHeight: "",
          housekeeperWeight: "",
          housekeeperDesc: "",
          housekeeperUrl: ""
        },
        rules: {
          housekeeperName: [
            { required: true, message: "请输入管家名称", trigger: "blur" }
          ],
          housekeeperSex: [
            { required: true, message: "请选择管家性别", trigger: "change" }
          ],
          housekeeperPwd: [{ required: true, message: "请输入管家密码", trigger: "blur" }],
          housekeeperPhone: [{ required: true, message: "请输入管家手机号", trigger: "blur" }],
          housekeeperHeight: [{ required: true, message: "请输入管家身高", trigger: "blur" }],
          housekeeperWeight: [{ required: true, message: "请输入管家体重", trigger: "blur" }],
          housekeeperDesc: [{ required: true, message: "请输入管家描述", trigger: "blur" }],
          housekeeperUrl: [{ required: true, message: "请选择管家照片", trigger: "change" }]
        },
        headers: {
          token: getToken()
        },
        upload: "/uploadManager/upload",
        housekeeperSexData: [
          { id: 0, name: "女" },
          { id: 1, name: "男" }
        ],

        maintenanceRecordData: [],
        pageIndex2: 1,
        pageSize2: 10,
        count2: 0,
        itemTableData2: {},
        mxData: [],
        mxObject: {},
        proudctAttributeList: [
          { id: 0, name: "在线购买" },
          { id: 1, name: " 预约查看" }
        ],

        clientData: [],
        pageIndex3: 1,
        pageSize3: 10,
        count3: 0,

        addOrUpdateLoading: false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async searchClick() {
        this.getData()
      },
      clearSearch() {
        this.getData()
      },
      async getData() {
        const { housekeeperName } = this.searchForm
        this.loading = true
        const data = await queryPageMajordomo({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          housekeeperName
        })
        this.tableData = data.object.data
        this.count = data.object.count
        this.loading = false
      },
      pagination(pageItem) {
        this.getData(pageItem.page, pageItem.limit)
      },


      handlerDelete({ id }) {
        this.$confirm("确定删除此数据吗", "删除操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        }).then(async () => {
          const { status } = await deleteMajordomo({
            id,
            isDeleted: 1
          })
          if (status == 200) {
            this.getData()
            this.isGlobalMessageShow = true
            this.message = "success"
          } else {
            this.message = "error"
          }
        })
      },

      // 新建管家
      newCompanyClick() {
        this.dialogCenterTitle = "新建管家"
        this.dialogTitle = "新建管家"

        Object.keys(this.newModel).forEach((item) => {
          this.newModel[item] = ""
        })

        this.detailsDisabled = false
        this.addOrUpdateLoading = false
        this.$refs.ycDialog.dialogVisible = true

        if (this.$refs["modelRef"]) {
          this.$refs["modelRef"].clearValidate()
        }
      },
      handlerEdit(row) {
        this.dialogCenterTitle = "编辑管家"
        this.dialogTitle = "编辑管家"


        this.newModel = {
          id: row.id,
          housekeeperCode: row.housekeeperCode,
          housekeeperName: row.housekeeperName,
          housekeeperSex: row.housekeeperSex,
          housekeeperPwd: row.housekeeperPwd,
          housekeeperPhone: row.housekeeperPhone,
          housekeeperHeight: row.housekeeperHeight,
          housekeeperWeight: row.housekeeperWeight,
          housekeeperDesc: row.housekeeperDesc,
          housekeeperUrl: row.housekeeperUrl
        }

        this.addOrUpdateLoading = false
        this.detailsDisabled = false
        this.$refs.ycDialog.dialogVisible = true

        if (this.$refs["modelRef"]) {
          this.$refs["modelRef"].clearValidate()
        }
      },

      handleLogoSuccess(id, file) {
        this.newModel.housekeeperUrl = file.response.object.url
      },
      beforeAvatarUpload(file) {
        // const isType = this.fileType.includes(file.type)
        const isLt2M = file.size / 1024 / 1024 < 5

        // if (!isJPG) {
        //   this.$message.error("上传头像图片只能是 JPG 格式!")
        // }
        // if (!isType) {
        //   this.$message.error("上传文件格式有问题！")
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 5MB!")
        // }
        // return isJPG && isLt2M
        // return isType && isLt2M
      },

      async dialogSave() {
        this.$refs.modelRef.validate(async (v) => {
          if (v) {
            this.addOrUpdateLoading = true

            if (this.detailsDisabled) {
              // 详情
              this.$refs.ycDialog.dialogVisible = false
            } else if (this.newModel.id) {
              //  编辑
              const { status, message } = await updateMajordomo({
                ...this.newModel
              })
              if (status == 200) {
                this.$message({
                  message: message,
                  type: "success"
                })
                this.getData()
                this.$refs.ycDialog.dialogVisible = false
              }
            } else {
              const { status, message } = await insertMajordomo({ ...this.newModel })
              if (status == "200") {
                this.$message({
                  message: message,
                  type: "success"
                })
                this.getData()
                this.$refs.ycDialog.dialogVisible = false
              }
            }
            this.addOrUpdateLoading = false
          }
        })
      },

      // 收益记录
      maintenanceRecordClick(row) {
        this.dialogTitle = "收益记录"

        this.itemTableData = row
        this.getRecordData()

        this.$refs.maintenanceRecordDialog.dialogVisible = true
      },
      async getRecordData() {
        const data = await queryPageHousekeeper({
          pageIndex: this.pageIndex2,
          pageSize: this.pageSize2,
          houseKeeperCode: this.itemTableData.housekeeperCode
        })
        this.maintenanceRecordData = data.object.data
        this.count2 = data.object.count
      },
      pagination2(pageItem) {
        this.getRecordData(pageItem.page, pageItem.limit)
      },

      // 查看明细
      async mxClick(row) {
        this.dialogTitle = "查看明细"

        this.itemTableData2 = row
        await this.queryOrderList()
        await this.queryOrderOne()

        this.$refs.mxdDialog.dialogVisible = true
      },
      async queryOrderOne() {
        const data = await queryOrderOne({
          orderCode: this.itemTableData2.orderCode
        })
        this.mxObject = data.object
      },
      async queryOrderList() {
        const data = await queryOrderList({
          orderCode: this.itemTableData2.orderCode
        })
        this.mxData = data.object
      },


      // 服务客户
      async configClick(row) {
        this.dialogTitle = "服务客户"
        this.dialogCenterTitle = "服务客户"

        this.itemTableData = row
        await this.getClientData()

        this.$refs.configDialog.dialogVisible = true
      },
      async getClientData() {
        const data = await queryPageCustomer({
          pageIndex: this.pageIndex3,
          pageSize: this.pageSize3,
          housekeeperCode: this.itemTableData.housekeeperCode
        })
        this.clientData = data.object.data
        this.count3 = data.object.count
      },
      pagination3(pageItem) {
        this.getClientData(pageItem.page, pageItem.limit)
      },

      receive() {
        this.isGlobalMessageShow = false
      },

      refresh() {
        this.searchForm = {
          agreementName: "",
          agreementType: ""
        }
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .clientType {
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          /*display: flex;*/
          /*margin-right: 20px;*/

          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;

            .el-input {
              width: 216px;
            }

            .el-select {
              width: 171px;
              margin-left: 10px;
            }

            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }

        /*.el-button {*/
        /*  // width: 42px;*/
        /*  height: 36px;*/
        /*  margin-top: 20px;*/
        /*}*/
      }
    }
  }

  .editor-container {
    pointer-events: none;
    background-color: #C0C4CC !important;
    color: #C0C4CC !important;
  }

  .orderTitle {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.6px;
    color: #333;
  }

  .orderValue {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.6px;
    color: #666;
  }

  .orderTitle2 {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.6px;
    color: #333;
  }

  .orderValue2 {
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 600;
    line-height: 19.6px;
    color: #666;
  }
  .my_line {
    width: 4px;
    height: 20px;
    background-color: #3276ff;
    margin-right: 10px;
    border-radius: 4px;
  }

  .my_title {
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: 600;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    /* cursor: no-drop; */
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .drop {
    cursor: no-drop;
  }
</style>
